<template>
  <div class="reply">
    <!-- 需要回复的评论 -->
    <van-cell>
      <template #title>
        <div class="item">
            <van-image
              width="40"
              height="40"
              fit="cover"
              :src="currentCom.aut_photo"
              round
            ></van-image>
            <div class="msg">
              <div class="name">{{currentCom.aut_name}}</div>
              <div class="com">{{currentCom.content}}</div>
              <div class="other">
                <span class="time"> {{currentCom.pubdate}} </span>
              </div>
            </div>
          </div>
      </template>
    </van-cell>
    <div class="line">-- 全部回复 --</div>
    <!-- 评论的回复列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onload"
    >
      <van-cell v-for="(item, index) in list" :key="index">
        <template #title>
          <div class="item">
          <van-image
            width="40"
            height="40"
            fit="cover"
            :src="item.aut_photo"
            round
          ></van-image>
          <div class="msg">
            <div class="name">{{item.aut_name}}</div>
            <div class="com">{{item.content}}</div>
            <div class="other">
              <span class="time"> {{item.pubdate}} </span>
            </div>
          </div>
        </div>
        </template>
      </van-cell>
    </van-list>
    <!-- 回复的输入框 -->
    <van-field
      class="myfield"
      v-model="content"
      clearable
      placeholder="请输入评论"
    >
      <template #button>
        <van-button @click="sendCom" size="small" type="info">发布</van-button>
      </template>
    </van-field>
  </div>
</template>

<script>
import { setCommentApi, getCommentsApi } from "@/api";
export default {
    props: ["currentCom"],
    data() {
        return {
            loading: false,
            finished: false,
            list: [],
            content: '',
            offset: undefined,
            limit: 10,
            // 结束的标识
            end_id: 0,
        };
    },
    methods: {
        async sendCom() {
            const res = await setCommentApi({
                target: this.currentCom.com_id, // 评论的 id
                content: this.content, // 回复的内容
                art_id: this.$route.query.id, // 文章 id
            });
            // 将返回的回复数据添加到 list 中前面
            this.list.unshift(res.data.data.new_obj);
            // 清空输入框
            this.content = "";
            // 将当前评论的回复数量加1
            this.currentCom.reply_count += 1;
        },
        async onload() {
             const res = await getCommentsApi({
                type: "c",
                source: this.currentCom.com_id.toString(), // 评论的 id
                offset: this.offset,
                limit: this.limit,
            });
            // console.log(res);
            // 将返回的回复数据保存到 list
            this.list = [...this.list, ...res.data.data.results];
            // 保存下一页的标识
            this.offset = res.data.data.last_id;
            // 保存结束的标识
            this.end_id = res.data.data.end_id;
            // 关闭 list 的加载状态
            this.loading = false;
            // 判断数据源是否加载完毕
            if (this.offset === this.end_id) {
                this.finished = true;
            }
        },
    }
};
</script>

<style lang="less">
.reply {
  .line {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 30px 0;
  }
}
</style>